<div [attr.aria-label]="getAriaLabel()">
  <div class="form-group row text-start" *ngFor="let num of questionDetails.options; let i = index;">
    <div class="col-md-5 col-xs-12 text-md-end col-form-label">
      <strong>{{ questionDetails.options[i] }}</strong>
    </div>
    <div class="col-md-7 col-xs-12 text-md-start">
      <select class="form-control form-select" [ngModel]="responseDetails.answers[i]"
              (ngModelChange)="triggerResponse(i, $event)" [disabled]="isDisabled" [attr.aria-label]="getAriaLabelForOption(questionDetails.options[i])">
        <option [ngValue]="RANK_OPTIONS_ANSWER_NOT_SUBMITTED"></option>
        <option *ngFor="let rank of ranksToBeAssigned" [ngValue]="rank">{{ rank }}</option>
      </select>
    </div>
  </div>

  <div>
    <p *ngIf="!questionDetails.areDuplicatesAllowed && isSameRanksAssigned" class="text-danger"><span class="fa fa-times"></span>
      The same rank should not be given multiple times.</p>
    <p *ngIf="isNoOptionRanked" class="text-info"><span class="fa fa-info-circle"></span>
      Please rank the above options.</p>
    <p *ngIf="isMinOptionsEnabled && isOptionsRankedLessThanMin" class="text-danger"><span class="fa fa-times"></span>
      You need to rank at least {{ questionDetails.minOptionsToBeRanked }} options.</p>
    <p *ngIf="isMaxOptionsEnabled && isOptionsRankedMoreThanMax" class="text-danger"><span class="fa fa-times"></span>
      Rank no more than {{questionDetails.maxOptionsToBeRanked}} options.</p>
  </div>
</div>
